<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>练习2</title>
  <style type="text/css">
    table, td {
      border: 1px solid;
      border-collapse: collapse;
      padding: 5px;
      width: 300px;
    }
  </style>
  <script src="../js/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("table:first tr:odd").css("background", "aqua");
      $("table:first tr:even").css("background", "violet");

      $("table:eq(1) tr:odd").css("background", "coral");
      $("table:eq(1) tr:even").css("background", "pink");

    })
  </script>
</head>
<body>
<h1>第一个表格</h1>
<table>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>6</td>
  </tr>
</table>
<h1>第二个表格</h1>
<table>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>6</td>
  </tr>
</table>
</body>
</html>
